<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IntersectionObserver</title>
    <style>
        body {
            margin: 0;
        }
        .header {
            height: 100px;
            background-color: rgb(169, 94, 239);
        }
        .footer {
            height: 100px;
            background-color:cadetblue;
        }
        .content {
            height: 2000px;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>
<!-- npm i intersection-observer -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
<script>
    var header = document.querySelector('.header')
    var content = document.querySelector('.content')
    var observer = new IntersectionObserver(function (mutations) {
        var status = mutations[0].isIntersecting
        console.log('可见状态', status)
        content.style.background = status ? '' : 'green'
    })
    observer.observe(header)
</script>
</html>